<div class="palm-page-header multi-line">
 <div class="palm-page-header-wrapper">
	<div id="title-icon" class="icon account-icon"></div>
 	<div class="title" id="page-title" style="display:block;">#{title}</div>
 </div>
</div>

<div id="create-form">
	<div class="palm-group">
		<div class="palm-group-title">Type de courrier</div>
		<div id="mail-type-list" class="palm-list">
			<div class="palm-row single">
				<div class="palm-row-wrapper">
					<div id="mail-type-selector" x-mojo-element="ListSelector"></div>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Hide the email address when editing the account -->
	<div class="palm-group" id="email-address-group">
		<div class="palm-group-title">Adresse email</div>
		<div class="palm-list">
			<div class="palm-row single">
				<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
					<div class="title">
						<div id="email-address" x-mojo-element="TextField"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="advanced-settings">
		<!-- Incoming Mail Server -->
		<div class="palm-group">
			<div class="palm-group-title">Serveur de courrier entrant</div>
			<div class="palm-list">
				<div class="palm-row first">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div id="incoming-host" x-mojo-element="TextField"></div>
						</div>
					</div>
				</div>
				<div id="incoming-eas">
					<div class="palm-row">
						<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
							<div class="title">
								<div class="label">Domaine</div>
								<div id="eas-domain" x-mojo-element="TextField"></div>
							</div>
						</div>
					</div>
				</div> 
				<div class="palm-row">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div class="label">Utilisateur</div>
							<div id="incoming-login" x-mojo-element="TextField"></div>
						</div>
					</div>
				</div>    
				<div class="palm-row" id="incoming-last-eas-row">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div class="label">Mot de passe</div>
							<div id="incoming-password" x-mojo-element="PasswordField"></div>
						</div>
					</div>
				</div>
				<div id="incoming-pop-imap">
					<div class="palm-row">
						<div class="palm-row-wrapper">                                                         	
							<div x-mojo-element="ListSelector" id="incoming-encryption"></div>
						</div>	
					</div>
					<div class="palm-row last">
						<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
							<div class="title">
								<div class="label">N° port</div>
								<div id="incoming-port" x-mojo-element="TextField"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="outgoing-mail-server" class="palm-group">
			<div class="palm-group-title">Serveur de courrier sortant</div>
			<div class="palm-list">
				<div class="palm-row first">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div id="outgoing-host" x-mojo-element="TextField"></div>
						</div>
					</div>
				</div>
				<div class="palm-row" id="outgoing-auth-toggle-row">
					<div class="palm-row-wrapper">                                                       	
						<div x-mojo-element="ToggleButton" id="outgoing-auth-toggle"></div>
						<div class="title">Utiliser l’authentification</div>
					</div>
				</div>  
				<div id="outgoing-server-auth-drawer" x-mojo-element="Drawer">
					<div class="palm-row">
						<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
							<div class="title">
								<div class="label">Utilisateur</div>
								<div id="outgoing-login" x-mojo-element="TextField"></div>
							</div>
						</div>
					</div>
					<div class="palm-row">
						<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
							<div class="title">
								<div class="label">Mot de passe</div>
								<div id="outgoing-password" x-mojo-element="PasswordField"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="palm-row">
					<div class="palm-row-wrapper">                                              	
						<div x-mojo-element="ListSelector" id="outgoing-encryption"></div>
					</div>
				</div>
				<div class="palm-row last">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div class="label">N° port</div>
							<div id="outgoing-port" x-mojo-element="TextField"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="imap-root-folder" class="palm-group">
			<div class="palm-group-title">Dossier racine</div>
			<div class="palm-list">
				<div class="palm-row single">
					<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
						<div class="title">
							<div id="root-folder" x-mojo-element="TextField"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="simple-settings" class="palm-group">
		<div class="palm-group-title">Mot de passe</div>
		    <div class="palm-list">
		      <div class="palm-row single">
		   	    <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
		        <div class="title">
				  <div id="incoming-password" x-mojo-element="PasswordField"></div>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
	</div>	
	
	
	<div x-mojo-element="Button" id="create-account-button">
	</div>
</div>
